<template>
  <div class="dashboard-container">
    <div class="dashboard-text">小宇物业欢迎您，尊敬的: {{ name }}</div>
    <el-row>
      <el-divider content-position="left">总体信息</el-divider>
    </el-row>
    <el-row>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          小区数量：{{ this.communityCount }}
        </div>
        <div class="content">
          <img
            src="../../assets/images/小区.png"
            class="img-responsive"
            alt="Image"
          />
        </div>
      </el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          楼栋数量:{{ this.buildCount }}
        </div>
        <div class="content">
          <img
            src="../../assets/images/楼栋.png"
            class="img-responsive"
            alt="Image"
          /></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          房屋总数:{{ this.houseCount }}
        </div>
        <div class="content">
          <img
            src="../../assets/images/住户.png"
            class="img-responsive"
            alt="Image"
          /></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          总人口数:{{ this.peoploCount }}
        </div>
        <div class="content">
          <img
            src="../../assets/images/人数.png"
            class="img-responsive"
            alt="Image"
          /></div
      ></el-col>
    </el-row>
    <el-row>
      <el-divider content-position="left">信息统计</el-divider>
    </el-row>

    <el-row>
      <el-col :span="12">
        <div id="regesiter_num" :style="{ height: '400px' }"></div
      ></el-col>
      <el-col :span="12">
        <div id="login_num" :style="{ height: '400px' }"></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts"; //引入echarts
import { mapGetters } from "vuex";
import dashboardApi from "@/api/sysDashboard/dashboard";
export default {
  data() {
    this.myChart=null
    return {
      communityCount: 0,
      buildCount: 0,
      houseCount: 0,
      peoploCount: 0,
    };
  },
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  //挂载时进行
  mounted() {
    this.selectBuildCount();
    this.selectCommunityCount();
    this.selectHouseCount();
    this.selectPeopleCount();
    
    this.myChart = echarts.init(document.getElementById("regesiter_num"));
    this.getData();
  },
  created() {},

  methods: {


    getData(){
        dashboardApi.getBuildData().then((res)=>{
          console.log(res.data);
          this.initData(res.data)
        })
    },
    initData(datalist) {
     console.log(datalist);
      this.myChart.setOption({
        title: {
          text: "小区人口统计",
          subtext: "人",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            // data: [
            //   { value: 1048, name: "Search Engine" },
            //   { value: 735, name: "Direct" },
            //   { value: 580, name: "Email" },
            //   { value: 484, name: "Union Ads" },
            //   { value: 300, name: "Video Ads" },
            // ],
            data:datalist,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },

    //去查询小区的数量
    selectCommunityCount() {
      dashboardApi.selectCommunityCount().then((res) => {
        console.log(res);
        this.communityCount = res.data;
      });
    },
    //去查询小区的数量
    selectBuildCount() {
      dashboardApi.selectBuildCount().then((res) => {
        this.buildCount = res.data;
      });
    },
    //去查询小区的数量
    selectHouseCount() {
      dashboardApi.selectHouseCount().then((res) => {
        this.houseCount = res.data;
      });
    },
    //去查询小区的数量
    selectPeopleCount() {
      dashboardApi.selectPeopleCount().then((res) => {
        this.peoploCount = res.data;
      });
    },
  },
};
</script>



<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #ffffff;
}
.bg-purple {
  background: #ffffff;
}
.bg-purple-light {
  background: #ffffff;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  text-align: center;
  line-height: 100px;
}
.row-bg {
  padding: 10px 0;
  background-color: #ffffff;
}
.content {
  text-align: center;
}
</style>
<style>
</style>

<!-- <template>
  <div>
    <el-row>
      <el-col :span="12">
        <div id="regesiter_num" :style="{ height: '300px' }"></div
      ></el-col>
      <el-col :span="12">
        <div id="login_num" :style="{ height: '300px' }"></div
      ></el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <div id="video_view_num" :style="{ height: '300px' }"></div
      ></el-col>
      <el-col :span="12">
        <div id="pic_view_num" :style="{ height: '300px' }"></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  //挂载时进行
  mounted() {
    this.initChars("regesiter_num", "注册人数统计");
    this.initChars("login_num", "注册人数统计");
    this.initChars("video_view_num", "注册人数统计");
    this.initChars("pic_view_num", "注册人数统计");
  },
  created() {},
  methods: {
    initChars(type, title) {
      var myChart = echarts.init(document.getElementById(type));

      myChart.setOption({
        title: {
          text: title,
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 2, 36, 10, 10, 20],
          },
        ],
      });
    },
  },
};
</script>

<style>
</style> -->
